<template>
  <div class="header__nav">
    <van-nav-bar :title="data?.titelTextvalue" @click-left="onClickLeft" @click-right="onClickRight">
      <template #left>
        <!-- <van-icon
          v-if="data?.leftArrowtag"
          class="left_icon"
          name="arrow-left"
        /> -->
        <img class="backIcon" v-if="data?.leftArrowtag" src="../../assets/images/backIcon.png" alt="" />
      </template>
      <template #right>
        <div class="right_btn" v-if="data?.rightArrowtag">确定</div>
      </template>
    </van-nav-bar>
  </div>
</template>

<script setup name="headerNav">
const router = useRouter()
const emit = defineEmits(['goBack'])
const props = defineProps({
  leftArrow: {
    type: Boolean,
    default: true,
  },
  slefBack: {
    type: Boolean,
    default: false,
  },
  titelText: {
    type: String,
    default: '',
  },
  rightArrow: {
    type: Boolean,
    default: false,
  },
})
const data = reactive({
  rightArrowtag: props?.rightArrow,
  leftArrowtag: props?.leftArrow,
  titelTextvalue: props?.titelText,
})

// 左边返回
const onClickLeft = () => {
  if (props?.leftArrow) {
    if (props?.slefBack) {
      emit('goBack')
    } else {
      router.go(-1)
    }
  }
}

// 右边返回
const onClickRight = () => {
  emit('submit')
}
</script>
<style lang="less" scpoed>
.right_btn {
  color: #ffffff;
}

.header__nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;

  .left_icon {
    color: black !important;
  }
}

.header__nav .van-nav-bar__content {
  background-color: #1764ce;
}

.header__nav .van-nav-bar__title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 24px;
  color: #ffffff;
}

.backIcon {
  width: 9px;
  height: 18px;
}
</style>
